<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
--><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="generator" content="joDoc">
<title>Apache Cordova API Documentation</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 1024px)">
<link rel="stylesheet" type="text/css" href="prettify/prettify.css">
</head>
<body>
        <div id="header">
            <h1><a href="index.html">Apache <strong>Cordova</strong> Documentation</a></h1>
            <small>
                <select><optgroup label="English" value="en">
<option value="edge">edge</option>
<option value="2.2.0rc2">2.2.0rc2</option>
<option value="2.2.0rc1">2.2.0rc1</option>
<option selected value="2.2.0">2.2.0</option>
<option value="2.1.0rc2">2.1.0rc2</option>
<option value="2.1.0rc1">2.1.0rc1</option>
<option value="2.1.0">2.1.0</option>
<option value="2.0.0rc1">2.0.0rc1</option>
<option value="2.0.0">2.0.0</option>
<option value="1.9.0rc1">1.9.0rc1</option>
<option value="1.9.0">1.9.0</option>
<option value="1.8.1">1.8.1</option>
<option value="1.8.0rc1">1.8.0rc1</option>
<option value="1.8.0">1.8.0</option>
<option value="1.7.0rc1">1.7.0rc1</option>
<option value="1.7.0">1.7.0</option>
<option value="1.6.1">1.6.1</option>
<option value="1.6.0rc1">1.6.0rc1</option>
<option value="1.6.0">1.6.0</option>
<option value="1.5.0rc1">1.5.0rc1</option>
<option value="1.5.0">1.5.0</option>
<option value="1.4.1">1.4.1</option>
<option value="1.4.0rc1">1.4.0rc1</option>
<option value="1.4.0">1.4.0</option>
<option value="1.3.0">1.3.0</option>
<option value="1.2.0">1.2.0</option>
<option value="1.1.0">1.1.0</option>
<option value="1.0.0rc3">1.0.0rc3</option>
<option value="1.0.0rc2">1.0.0rc2</option>
<option value="1.0.0rc1">1.0.0rc1</option>
<option value="1.0.0">1.0.0</option>
<option value="0.9.6">0.9.6</option>
<option value="0.9.5.1">0.9.5.1</option>
<option value="0.9.5">0.9.5</option>
<option value="0.9.4">0.9.4</option>
<option value="0.9.3">0.9.3</option>
<option value="0.9.2">0.9.2</option>
</optgroup>
<optgroup label="Español" value="es"><option value="1.0.0">1.0.0</option></optgroup>
<optgroup label="Français" value="fr">
<option value="1.3.0">1.3.0</option>
<option value="1.2.0">1.2.0</option>
<option value="1.1.0">1.1.0</option>
</optgroup>
<optgroup label="Japanese" value="jp">
<option value="2.0.0">2.0.0</option>
<option value="1.9.0">1.9.0</option>
<option value="1.8.1">1.8.1</option>
<option value="1.7.0">1.7.0</option>
<option value="0.9.5">0.9.5</option>
</optgroup>
<optgroup label="Korean" value="kr"><option value="2.0.0">2.0.0</option></optgroup></select></small>
        </div>
        <div id="subheader">
            <h1>Getting Started with Windows 8</h1>
            <small><select><option value="Getting%2520Started%2520with%2520Windows%25208">Getting Started with Windows 8</option>
<option value="Getting%20Started%20with%20Windows%208_1_requirements">      - 1. Requirements</option>
<option value="Getting%20Started%20with%20Windows%208_2_install_sdk_cordova">      - 2. Install SDK + Cordova</option>
<option value="Getting%20Started%20with%20Windows%208_3_setup_new_project">      - 3. Setup New Project</option>
<option value="Getting%20Started%20with%20Windows%208_5_test_the_project">      - 5. Test the Project</option>
<option value="Getting%20Started%20with%20Windows%208_done">      - Done!</option></select></small>
        </div>

        <div id="sidebar">
            <div class="vertical_divider"></div>
        <h1>API Reference</h1>
<ul>
<li><a href="cordova_accelerometer_accelerometer.md.html#Accelerometer">Accelerometer</a></li>
<li><a href="cordova_camera_camera.md.html#Camera">Camera</a></li>
<li><a href="cordova_media_capture_capture.md.html#Capture">Capture</a></li>
<li><a href="cordova_compass_compass.md.html#Compass">Compass</a></li>
<li><a href="cordova_connection_connection.md.html#Connection">Connection</a></li>
<li><a href="cordova_contacts_contacts.md.html#Contacts">Contacts</a></li>
<li><a href="cordova_device_device.md.html#Device">Device</a></li>
<li><a href="cordova_events_events.md.html#Events">Events</a></li>
<li><a href="cordova_file_file.md.html#File">File</a></li>
<li><a href="cordova_geolocation_geolocation.md.html#Geolocation">Geolocation</a></li>
<li><a href="cordova_globalization_globalization.md.html#Globalization">Globalization</a></li>
<li><a href="cordova_media_media.md.html#Media">Media</a></li>
<li><a href="cordova_notification_notification.md.html#Notification">Notification</a></li>
<li><a href="cordova_splashscreen_splashscreen.md.html#Splashscreen">Splashscreen</a></li>
<li><a href="cordova_storage_storage.md.html#Storage">Storage</a></li>
</ul>
<h1>Guides</h1>
<ul>
<li><a href="guide_getting-started_index.md.html#Getting%20Started%20Guides">Getting Started Guides</a></li>
<li><a href="guide_command-line_index.md.html#Command-Line%20Usage">Command-Line Usage</a></li>
<li><a href="guide_upgrading_index.md.html#Upgrading%20Guides">Upgrading Guides</a></li>
<li><a href="guide_project-settings_index.md.html#Project%20Settings">Project Settings</a></li>
<li><a href="guide_plugin-development_index.md.html#Plugin%20Development%20Guide">Plugin Development Guide</a></li>
<li><a href="guide_whitelist_index.md.html#Domain%20Whitelist%20Guide">Domain Whitelist Guide</a></li>
<li><a href="guide_cordova-webview_index.md.html#Embedding%20WebView">Embedding WebView</a></li>
<li><a href="_index.html">Keyword Index</a></li>
</ul>
</div>

        <div id="scrollable">
            <div id="content">
                <h1><a name="Getting%20Started%20with%20Windows%208">Getting Started with Windows 8</a></h1>

<p>This guide describes how to set up your development environment for Cordova and run a sample application.  Note that Cordova used to be called PhoneGap, so some of the sites still use the old PhoneGap name.</p>

<p>During development of Windows 8 and Windows RT, Microsoft deprecated the name "Metro-style apps". On MSDN, this type of app is now called a "Windows Store" app. That's the name that we'll use in this guide. Also in this guide whenever we refer to Windows 8, you should take that to mean both Windows 8 and Windows RT.</p>

<h2>
<a name="Getting%20Started%20with%20Windows%208_1_requirements">1. Requirements</a>
</h2>

<ul>
<li><p>Windows 8</p></li>
<li><p>Visual Studio 2012 Professional or better, or Visual Studio 2012 Express for Windows 8</p></li>
</ul>
<p>Follow the instructions <a class="external" href="http://www.windowsstore.com/">here</a> to submit your apps Windows Store.</p>

<h2>
<a name="Getting%20Started%20with%20Windows%208_2_install_sdk_cordova">2. Install SDK + Cordova</a>
</h2>

<ul>
<li>Setup your preferred variant of Visual Studio 2012. All of the paid versions of the product (Professional, etc) let you build Windows Store apps. To build Windows Store apps using the <a class="external" href="http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-products">Express editions</a>, you will need <strong>Express for Windows 8</strong>.</li>
<li>Download the latest copy of <a class="external" href="http://phonegap.com/download">Cordova</a> and extract its contents. We will be working with the subfolder <strong>lib\windows-8</strong>.</li>
</ul>
<h2>
<a name="Getting%20Started%20with%20Windows%208_3_setup_new_project">3. Setup New Project</a>
</h2>

<p>You can already build Windows 8 apps using the "HTML/JavaScript track" available in Windows Store apps. The purpose of Cordova in Windows Store apps is to expose the same APIs used on all the other Cordova platforms.</p>

<ul>
<li>Open Visual Studio 2012 and choose <strong>New Project</strong>.</li>
<li>
<p>Select <strong>Installed - Template - Other Languages - JavaScript - Windows Store</strong> from the tree, and then <strong>Blank App</strong> from the projects list. Enter whatever project name you like. We're using <strong>CordovaWin8Foo</strong> in this guide.</p>

<p><img src="img/guide/getting-started/windows-8/wsnewproject.PNG" alt="" title=""></p>
</li>
<li>
<p>Microsoft continues to use <strong>default.html</strong> as the default page for use in websites, whereas most "open web" developers use <strong>index.html</strong>. (Plus it's likely that in the other platform variants of your project you are using <strong>index.html</strong> as the name of your default page.) To fix this, in Solution Explorer rename the <strong>default.html</strong> file to <strong>index.html</strong>. Then double-click the <strong>package.appxmanifest</strong> file and change the <strong>Start page</strong> value to <strong>index.html</strong>. </p>

<p><img src="img/guide/getting-started/windows-8/wschangemanifest.PNG" alt="" title=""></p>
</li>
<li><p>To include <strong>cordova.js</strong> in your project, right-click on the <strong>js</strong> folder in Solution Explorer and select <strong>Add - New Item</strong>. Locate the <strong>corvoda.js</strong> file in the <strong>lib\windows-8</strong> folder that we called out previously. </p></li>
<li><p>Edit the code for <strong>index.html</strong>. Add a reference to <strong>cordova.js</strong>. You can do this manually, or by dragging the file from Solution Explorer.</p></li>
</ul>
<h3>Adding the reference...</h3>

<pre class="prettyprint"><code>    &lt;!-- WinJS references --&gt;
    &lt;link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /&gt;
    &lt;script src="//Microsoft.WinJS.1.0/js/base.js"&gt;&lt;/script&gt;
    &lt;script src="//Microsoft.WinJS.1.0/js/ui.js"&gt;&lt;/script&gt;

    &lt;!-- Cordova --&gt;
    &lt;script src="/js/cordova.js"&gt;&lt;/script&gt;

    &lt;!-- CordovaWin8Foo references --&gt;
    &lt;link href="/css/default.css" rel="stylesheet" /&gt;
    &lt;script src="/js/default.js"&gt;&lt;/script&gt;
</code></pre>

<ul>
<li>Next we want to add some code that will demonstrate that Cordova is working. </li>
</ul>
<h3>Adding a '<a href="cordova_events_events.md.html#deviceready">deviceready</a>' handler...</h3>

<pre class="prettyprint"><code>&lt;body&gt;
    &lt;p&gt;Content goes here&lt;/p&gt;

    &lt;script type="text/javascript"&gt;

        console.log("Subscribing...");
        document.addEventListener("<a href="cordova_events_events.md.html#deviceready">deviceready</a>", function () {

            navigator.<a href="cordova_notification_notification.md.html#notification.alert">notification.alert</a>("The device is ready!");

        });

    &lt;/script&gt;

&lt;/body&gt;
</code></pre>

<h2>
<a name="Getting%20Started%20with%20Windows%208_5_test_the_project">5. Test the Project</a>
</h2>

<ul>
<li>
<p>Run the project from Visual Studio. You'll see the message box appear.</p>

<p><img src="img/guide/getting-started/windows-8/wsalert.PNG" alt="" title=""></p>
</li>
</ul>
<h2>
<a name="Getting%20Started%20with%20Windows%208_done">Done!</a>
</h2>

<p>That's it! You're now ready to build Windows Store apps with Cordova.</p>

            </div>
        </div>

        <!-- Functionality and Syntax Highlighting -->
        <script type="text/javascript" src="index.js"></script><script type="text/javascript" src="prettify/prettify.js"></script>
</body>
</html>
